<template>
	<vp-main-page @refresh="loadDataList">
		<template #table>
			<vp-table :data="tableData" stripe border  style="width: 100%" row-key="id"
				ref="tableRef"
				default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			>
				<el-table-column  type="index" align="center" label="#">
				</el-table-column>
				<el-table-column  prop="dprtcode" show-overflow-tooltip >
					<template #header><vp-label zh="部门编码" en="Dprt Code"/></template>
				</el-table-column>
				<el-table-column prop="dprtname" show-overflow-tooltip >
					<template #header><vp-label zh="部门名称" en="Dprt Name"/></template>
				</el-table-column>
				<el-table-column show-overflow-tooltip>
					<template #header><vp-label zh="类型" en="Type"/></template>
                    <template #default="scope">
                        {{scope.row.dprttype == '1'? '机构/Org':(scope.row.dprttype == '2' ?'部门/Dept': '') }}
                    </template>
				</el-table-column>
				<el-table-column prop="fzrxm" show-overflow-tooltip >
					<template #header><vp-label zh="负责人" en="Manager"/></template>
				</el-table-column>
				<el-table-column prop="pxh" show-overflow-tooltip>
					<template #header><vp-label zh="排序" en="Sort"/></template>
				</el-table-column>
				<el-table-column :label="$t('item.operations')" fixed="right"  width="150">
					<template #header>
						<vp-label-operations/>
					</template>
					<template #default="scope">
						<el-space>
							<vp-btn-add text v-auth="'systemDepartment.edit'" @click="handleAdd(scope.row)"/>
							<vp-btn-edit text v-if="scope.row.parentid!=='0'" v-auth="'systemDepartment.edit'" @click="handleEdit(scope.row)"/>
							<vp-btn-del text v-if="scope.row.parentid!=='0'" v-auth="'systemDepartment.edit'" @click="handleDel(scope.row)"/>
						</el-space>
					</template>
				</el-table-column>
			</vp-table>
		</template>	
		<EditDepartment ref="editDepartmentRef" @formSubmited="handleFormSubmited">
		</EditDepartment>
	</vp-main-page>
</template>
<script setup lang="ts" name="systemDepartment">
import { defineAsyncComponent, onMounted, ref } from 'vue';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import request from '/@/utils/request';

	const EditDepartment = defineAsyncComponent(() => import('./component/EditDepartment.vue'));

	const tableData = ref([]);
	const loading = ref(false);

	const loadDataList = () => {
		loading.value = true
		request.get('/system/department/list').then(res => {
			tableData.value = res?.data || []
		}).finally(()=>{
			loading.value = false
		})
	}

	onMounted(() => {
		loadDataList()
	})

	const editDepartmentRef = ref();
	const handleFormSubmited = ()=>{
		loadDataList();
	}

	const handleAdd = (row: any)=>{
		editDepartmentRef.value.handleOpen('add', row.id);
	}
	const handleEdit = (row: any)=>{
		editDepartmentRef.value.handleOpen('edit', row.parentid, row.id);
	}
	const handleDel = (row: any)=>{
		VpMessageBox.confirmDelete().then(()=>{
			request.delete(`/system/department/${row.id}`).then(res => {
				loadDataList();
			})
		});

	}

	const tableRef = ref();

</script>
